<template>
    <a-checkbox v-model:checked="InputValue" :disabled="readonly">{{ option.label }}</a-checkbox>
</template>
<script setup>
import { ref, watch, watchEffect } from 'vue';

const emit = defineEmits(['UpdateEvent'])
const props = defineProps({
    option: Object,
    Value: {},
});

const InputValue = ref(false);

const readonly = ref(false);

watchEffect(() => {
    readonly.value = !!props.option.readonly
})

watch(() => props.Value[props.option.key], val => {
    InputValue.value = val
}, { immediate: true });

watch(InputValue, (val) => {
    emit('UpdateEvent', props.option.key, val);
})


</script>
<style lang="less" scoped></style>